<script setup>
import { ref, onMounted } from 'vue'
import { useToolsStore } from '@/store/tools'
import { useRoute, useRouter } from 'vue-router'
import { useCommonStore } from '@/store/common'
//store
const commonStore = useCommonStore()

//激活菜单
const props = defineProps(['activeCateId'])

const router = useRouter()
const route = useRoute()

// 打开导航栏
const isOpenNav = ref(false)
//tools store
const toolsStore = useToolsStore()

// 打开菜单栏
function openNav() {
  if (isOpenNav.value) {
	  isOpenNav.value = false;
  } else {
	  isOpenNav.value = true;
  }
}

//跳转锚点
const query = { value: '' }
const gotoAnchor = (anchor) => {
  // 如果页面不在工具业，则先跳转路由
  if (route.path === '/tools') {
    document?.getElementById(anchor)?.scrollIntoView({
      behavior: "smooth", //smooth:平滑，auto：直接定位
      block: "start",
      inline: "start",
    });
  } else {
    query.value = anchor
    router.push({
      path: '/tools',
      query: query
    })
  }
}
</script>

<template>
	<div class="h-full">
		<!-- 小屏适配抽屉菜单 -->
		<div v-if="commonStore.isSmallScreen">
			<el-drawer direction="ltr" title="分类" size="50%" v-model="isOpenNav">
			    <template #default>
			      <div>
			        <el-menu
			        class="left-menu"
			        :default-active="props.activeCateId"
			        :collapse-transition = "false"
			        >
			        	<el-menu-item 
			        	:index="cate.id.toString()" 
			        	v-for="(cate, index) in toolsStore.toolsCate"  
			        	@click="gotoAnchor('cate_' + cate.id)">
			        		<el-icon><component :is = "cate.icon"></component></el-icon>
			        		<span slot="title">{{cate.title}}</span>
			        	</el-menu-item>
			        </el-menu>
			      </div>
			    </template>
			  </el-drawer>
			  <!-- 折叠菜单 -->
			  <div class="expand-btn" @click="isOpenNav = true">
			  		<el-icon :size="25" class="pl-2"><ArrowRight /></el-icon>
			  </div>
		</div>
		<!-- 导航菜单 -->
		<div class="h-full flex flex-col" v-else>
			<div class="flex-1">
				<el-scrollbar>
					<el-menu 
					class="left-menu"
					:default-active="props.activeCateId"
					:collapse="!isOpenNav"
					:collapse-transition = "false"
					>
						<el-menu-item 
						:index="cate.id.toString()" 
						v-for="(cate, index) in toolsStore.toolsCate"  
						@click="gotoAnchor('cate_' + cate.id)">
							<el-icon><component :is = "cate.icon"></component></el-icon>
							<span slot="title">{{cate.title}}</span>
						</el-menu-item>
					</el-menu>
				</el-scrollbar>
			</div>
			<!-- 折叠菜单 -->
			<div class="collapse-item" v-on:click="openNav">
				<el-icon v-if="!isOpenNav" :size="20"><Expand /></el-icon>
				<el-icon v-else :size="20"><Fold /></el-icon>
			</div>
		</div>
	</div>
</template>

<style>
.collapse-item{
	text-align: center;
}
.el-menu{
	border-right: none !important;
}
.left-menu .el-menu-item.is-active {
    background-color: var(--el-menu-hover-bg-color);
}
.expand-btn {
	width: 30px;
	height: 30px;
	border-radius: 0 50% 50% 0;
	border-width: 2px;
	border-color: inherit;
	position: fixed;
	left: -12px;
	top: 50%;
	cursor: pointer;
	z-index: 1000; /* 确保按钮在顶部 */
	}
</style>